@page "/maps/legend"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes grouping of countries in the legend based on their population density. The type and position of the legend can be changed using the Type and Position options in the properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render a legend in maps using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html'>MapsLegendSettings</a></code> property. A legend item denotes the value of a shape. Any number of legend items can be added to a legend. You can bind the desired colors to the shapes if its values are within the specified range using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMappings.html'>MapsShapeColorMappings</a></code> property. You can also show or hide color mapping related to population density while toggling the legend item. Tooltip is enabled in this example.</p>
   <p>More information about legend can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/legend'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfMaps>
        <MapsZoomSettings Enable="false" />
        <MapsTitleSettings Text="Population density (per square kilometers) - 2015">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLegendSettings Visible="true" Mode="@LegendTypeValue" Position="@LegendPositionValue">
            <MapsToggleLegendSettings Enable="@ToggleCheck" />
        </MapsLegendSettings>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Name" ShapePropertyPath="@ShapePropertyPath" DataSource="@LegendData" TValue="PopulationDensityData">
                <MapsLayerTooltipSettings Visible="true" ValuePath="Name" Format="${Name} : ${Density} per square kms"/>
                <MapsShapeSettings ColorValuePath="Density" Fill="#E5E5E5">
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping StartRange="0.00001" EndRange="100" Color="@ShapeColorOne" Label="<100" />
                        <MapsShapeColorMapping StartRange="100" EndRange="200" Color="@ShapeColorTwo" Label="100-200" />
                        <MapsShapeColorMapping StartRange="200" EndRange="300" Color="@ShapeColorThree" Label="200-300" />
                        <MapsShapeColorMapping StartRange="300" EndRange="500" Color="@ShapeColorFour" Label="300-500" />
                        <MapsShapeColorMapping StartRange="500" EndRange="19000" Color="@ShapeColorFive" Label=">500" />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://simple.wikipedia.org/wiki/List_of_countries_by_population_density" target="_blank">simple.wikipedia.org</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 35px">
                        <td style="width: 70%">
                            Legend Type
                        </td>
                        <td style="width: 50%">
                            <SfDropDownList Placeholder="Select layoutMode type" DataSource="@LegendType" @bind-Value="@LegendTypeDropDownValue" Width="120px">
                                <DropDownListEvents TItem="DropValues" TValue="string" ValueChange="LegendTypeChange" />
                                <DropDownListFieldSettings Text="Name" Value="Value" />
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%">
                            Legend Position
                        </td>
                        <td style="width: 50%">
                            <SfDropDownList Placeholder="Legend Position" DataSource="@LegendPosition" @bind-Value="@LegendPositionDropDownValue" Width="120px">
                                <DropDownListEvents TItem="DropValues" ValueChange="LegendPositionChange" TValue="string" />
                                <DropDownListFieldSettings Text="Name" Value="Value" />
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr style="height: 80px">
                        <td style="width: 70%">
                            <div style="width:90%">
                            Show population density when the legend item is toggled
                            </div>
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@ToggleCheck" ValueChange="LegendToggleChange" TChecked="bool" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@code {
    public LegendMode LegendTypeValue = LegendMode.Default;
    public Syncfusion.Blazor.Maps.LegendPosition LegendPositionValue = Syncfusion.Blazor.Maps.LegendPosition.Top;
    public string LegendTypeDropDownValue = "Default";
    public string LegendPositionDropDownValue = "Top";
    public string[] ShapePropertyPath = { "name" };
    public bool ToggleCheck = false;
    public string[] ShapeColorOne = { "#99AED6" };
    public string[] ShapeColorTwo = { "#738FC7" };
    public string[] ShapeColorThree = { "#4D70B8" };
    public string[] ShapeColorFour = { "#2652A8" };
    public string[] ShapeColorFive = { "#003399" };
    public class PopulationDensityData
    {
        public string Code { get; set; }
        public double Value { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public double Density { get; set; }
    };
    public List<PopulationDensityData> LegendData = new List<PopulationDensityData> {
        new PopulationDensityData { Code="Côte", Value=1000, Name="Côte d'Ivoire", Population=1000000000, Density=-1 },
        new PopulationDensityData { Code="BH", Value=2000, Name="Bhutan", Population=202002020, Density=-1 },
        new PopulationDensityData { Code="Ec", Value=2000, Name="Ecuador", Population=10102002, Density=-1 },
        new PopulationDensityData { Code="AF", Value=53, Name="Afghanistan", Population=29863010, Density=119 },
        new PopulationDensityData { Code="AL", Value=117, Name="Albania", Population=3195000, Density=111 },
        new PopulationDensityData { Code="DZ", Value=15, Name="Algeria", Population=34895000, Density=15 },
        new PopulationDensityData { Code="AO", Value=15, Name="Angola", Population=18498000, Density=15 },
        new PopulationDensityData { Code="AR", Value=15, Name="Argentina", Population=40091359, Density=14 },
        new PopulationDensityData { Code="AM", Value=109, Name="Armenia", Population=3230100, Density=108 },
        new PopulationDensityData { Code="AU", Value=3, Name="Australia", Population=23839595, Density=3.3 },
        new PopulationDensityData { Code="AT", Value=102, Name="Austria", Population=8372930, Density=100 },
        new PopulationDensityData { Code="AZ", Value=110, Name="Azerbaijan", Population=9165000, Density=106 },
        new PopulationDensityData { Code="BS", Value=34, Name="Bahamas", Population=342000, Density=25 },
        new PopulationDensityData { Code="BD", Value=1142, Name="Bangladesh", Population=164994076, Density=1118 },
        new PopulationDensityData { Code="BY", Value=47, Name="Belarus", Population=9755106, Density=47 },
        new PopulationDensityData { Code="BE", Value=359, Name="Belgium", Population=10827519, Density=355 },
        new PopulationDensityData { Code="BZ", Value=15, Name="Belize", Population=322000, Density=14 },
        new PopulationDensityData { Code="BJ", Value=80, Name="Benin", Population=8935000, Density=79 },
        new PopulationDensityData { Code="BO", Value=9, Name="Bolivia", Population=9879000, Density=9 },
        new PopulationDensityData { Code="BA", Value=73, Name="Bosnia and Herz.", Population=3843126, Density=75 },
        new PopulationDensityData { Code="BW", Value=4, Name="Botswana", Population=1950000, Density=3.4 },
        new PopulationDensityData { Code="BR", Value=23, Name="Brazil", Population=206598985, Density=24 },
        new PopulationDensityData { Code="BN", Value=76, Name="Brunei", Population=400000, Density=69 },
        new PopulationDensityData { Code="BG", Value=69, Name="Bulgaria", Population=7351234, Density=66 },
        new PopulationDensityData { Code="BF", Value=60, Name="Burkina Faso", Population=15757000, Density=58 },
        new PopulationDensityData { Code="BI", Value=326, Name="Burundi", Population=8303000, Density=298 },
        new PopulationDensityData { Code="KH", Value=80, Name="Cambodia", Population=14805000, Density=82 },
        new PopulationDensityData { Code="CM", Value=41, Name="Cameroon", Population=19522000, Density=106 },
        new PopulationDensityData { Code="CA", Value=4, Name="Canada", Population=35151728, Density=3.4 },
        new PopulationDensityData { Code="CF", Value=7, Name="Central African Rep.", Population=4422000, Density=7.1 },
        new PopulationDensityData { Code="TD", Value=9, Name="Chad", Population=11274106, Density=8.8 },
        new PopulationDensityData { Code="CL", Value=23, Name="Chile", Population=18349928, Density=24 },
        new PopulationDensityData { Code="CN", Value=143, Name="China", Population=1389750000, Density=144 },
        new PopulationDensityData { Code="CO", Value=42, Name="Colombia", Population=49471496, Density=43 },
        new PopulationDensityData { Code="CD", Value=29, Name="Dem. Rep. Congo", Population=68692542, Density=29 },
        new PopulationDensityData { Code="CG", Value=12, Name="Congo", Population=3998904, Density=12 },
        new PopulationDensityData { Code="CR", Value=91, Name="Costa Rica", Population=4579000, Density=90 },
        new PopulationDensityData { Code="HR", Value=79, Name="Croatia", Population=4443000, Density=79 },
        new PopulationDensityData { Code="CU", Value=106, Name="Cuba", Population=11241894, Density=102 },
        new PopulationDensityData { Code="CY", Value=119, Name="Cyprus", Population=801851, Density=87 },
        new PopulationDensityData { Code="CZ", Value=136, Name="Czech Rep.", Population=10532770, Density=134 },
        new PopulationDensityData { Code="DK", Value=131, Name="Denmark", Population=5532531, Density=128 },
        new PopulationDensityData { Code="DJ", Value=38, Name="Djibouti", Population=864000, Density=38 },
        new PopulationDensityData { Code="DO", Value=205, Name="Dominican Rep.", Population=10090000, Density=207 },
        new PopulationDensityData { Code="EG", Value=81, Name="Egypt", Population=90177649, Density=90 },
        new PopulationDensityData { Code="SV", Value=299, Name="El Salvador", Population=6163000, Density=293 },
        new PopulationDensityData { Code="GQ", Value=25, Name="Guinea", Population=10069000, Density=41 },
        new PopulationDensityData { Code="ER", Value=52, Name="Eritrea", Population=5073000, Density=43 },
        new PopulationDensityData { Code="EE", Value=32, Name="Estonia", Population=1315819, Density=29 },
        new PopulationDensityData { Code="ET", Value=83, Name="Ethiopia", Population=79221000, Density=72 },
        new PopulationDensityData { Code="FJ", Value=47, Name="Fiji", Population=849000, Density=46 },
        new PopulationDensityData { Code="FI", Value=18, Name="Finland", Population=5538741, Density=16 },
        new PopulationDensityData { Code="FR", Value=118, Name="France", Population=62793432, Density=114 },
        new PopulationDensityData { Code="GA", Value=6, Name="Gabon", Population=1475000, Density=5.5 },
        new PopulationDensityData { Code="GM", Value=173, Name="Gambia", Population=1705000, Density=151 },
        new PopulationDensityData { Code="GE", Value=78, Name="Georgia", Population=4465000, Density=64 },
        new PopulationDensityData { Code="DE", Value=234, Name="Germany", Population=81757600, Density=229 },
        new PopulationDensityData { Code="GH", Value=107, Name="Ghana", Population=23837000, Density=100 },
        new PopulationDensityData { Code="GR", Value=88, Name="Greece", Population=11306183, Density=86 },
        new PopulationDensityData { Code="GL", Value=0.02, Name="Greenland", Population=57001, Density=0.026 },
        new PopulationDensityData { Code="GT", Value=134, Name="Guatemala", Population=14027000, Density=129 },
        new PopulationDensityData { Code="GN", Value=41, Name="Guinea", Population=10069000, Density=41 },
        new PopulationDensityData { Code="GW", Value=54, Name="Guinea-Bissau", Population=1611000, Density=45 },
        new PopulationDensityData { Code="GY", Value=4, Name="Guyana", Population=762000, Density=3.5 },
        new PopulationDensityData { Code="HT", Value=363, Name="Haiti", Population=10033000, Density=362 },
        new PopulationDensityData { Code="HN", Value=68, Name="Honduras", Population=7466000, Density=66 },
        new PopulationDensityData { Code="HU", Value=112, Name="Hungary", Population=10013628, Density=108 },
        new PopulationDensityData { Code="IS", Value=3, Name="Iceland", Population=318452, Density=3.1 },
        new PopulationDensityData { Code="IN", Value=394, Name="India", Population=1198003000, Density=364 },
        new PopulationDensityData { Code="ID", Value=132, Name="Indonesia", Population=237556363, Density=121 },
        new PopulationDensityData { Code="IR", Value=45, Name="Iran", Population=74196000, Density=117 },
        new PopulationDensityData { Code="IQ", Value=73, Name="Iraq", Population=30747000, Density=70 },
        new PopulationDensityData { Code="IE", Value=65, Name="Ireland", Population=4581269, Density=65 },
        new PopulationDensityData { Code="IL", Value=352, Name="Israel", Population=7697600, Density=371 },
        new PopulationDensityData { Code="IT", Value=206, Name="Italy", Population=60200060, Density=200 },
        new PopulationDensityData { Code="JM", Value=250, Name="Jamaica", Population=2719000, Density=247 },
        new PopulationDensityData { Code="JP", Value=350, Name="Japan", Population=127387000, Density=337 },
        new PopulationDensityData { Code="JO", Value=69, Name="Jordan", Population=6316000, Density=67 },
        new PopulationDensityData { Code="KZ", Value=6, Name="Kazakhstan", Population=17010000, Density=6.2 },
        new PopulationDensityData { Code="KE", Value=71, Name="Kenya", Population=39802000, Density=69 },
        new PopulationDensityData { Code="KP", Value=202, Name="Dem. Rep. Korea", Population=24051706, Density=200 },
        new PopulationDensityData { Code="KR", Value=504, Name="Korea", Population=48456369, Density=487 },
        new PopulationDensityData { Code="XK", Value=167, Name="Kosovo", Population=7800000, Density=101 },
        new PopulationDensityData { Code="KW", Value=154, Name="Kuwait", Population=3566437, Density=200 },
        new PopulationDensityData { Code="KG", Value=28, Name="Kyrgyzstan", Population=5482000, Density=27 },
        new PopulationDensityData { Code="LA", Value=27, Name="Lao PDR", Population=6320000, Density=27 },
        new PopulationDensityData { Code="LV", Value=36, Name="Latvia", Population=2248961, Density=35 },
        new PopulationDensityData { Code="LB", Value=413, Name="Lebanon", Population=4224000, Density=404 },
        new PopulationDensityData { Code="LS", Value=72, Name="Lesotho", Population=2067000, Density=68 },
        new PopulationDensityData { Code="LR", Value=41, Name="Liberia", Population=3476608, Density= 38 },
        new PopulationDensityData { Code="LY", Value=4, Name="Libya", Population=6420000, Density=3.6 },
        new PopulationDensityData { Code="LT", Value=53, Name="Lithuania", Population=3053800, Density=47 },
        new PopulationDensityData { Code="LU", Value=195, Name="Luxembourg", Population=502207, Density=194 },
        new PopulationDensityData { Code="MK", Value=82, Name="Macedonia", Population=2114550, Density=82 },
        new PopulationDensityData { Code="MG", Value=36, Name="Madagascar", Population=20653556, Density=35 },
        new PopulationDensityData { Code="MW", Value=158, Name="Malawi", Population=15263000, Density=129 },
        new PopulationDensityData { Code="MY", Value=86, Name="Malaysia", Population=28306700, Density=86 },
        new PopulationDensityData { Code="ML", Value=13, Name="Mali", Population=14517176, Density=12 },
        new PopulationDensityData { Code="MR", Value=3, Name="Mauritania", Population=3291000, Density=3.2 },
        new PopulationDensityData { Code="MX", Value=58, Name="Mexico", Population=107550697, Density=57 },
        new PopulationDensityData { Code="MD", Value=124, Name="Moldova", Population=3567500, Density=105 },
        new PopulationDensityData { Code="MC", Value=17704, Name="Monaco", Population=33000, Density=16923 },
        new PopulationDensityData { Code="MN", Value=2, Name="Mongolia", Population=2671000, Density=1.7 },
        new PopulationDensityData { Code="ME", Value=47, Name="Montenegro", Population=630548, Density=45 },
        new PopulationDensityData { Code="MA", Value=72, Name="Morocco", Population=34407605, Density=77 },
        new PopulationDensityData { Code="MZ", Value=30, Name="Mozambique", Population=22894000, Density=29 },
        new PopulationDensityData { Code="MM", Value=73, Name="Myanmar", Population=50020000, Density=74 },
        new PopulationDensityData { Code="NA", Value=3, Name="Namibia", Population=2171000, Density=2.6 },
        new PopulationDensityData { Code="NP", Value=209, Name="Nepal", Population=29331000, Density=109 },
        new PopulationDensityData { Code="NL", Value=492, Name="Netherlands", Population=17250000, Density=415 },
        new PopulationDensityData { Code="NC", Value=14, Name="New Caledonia", Population=244410, Density=13 },
        new PopulationDensityData { Code="NZ", Value=17, Name="New Zealand", Population=4315800, Density=16 },
        new PopulationDensityData { Code="NI", Value= 48, Name="Nicaragua", Population=5743000, Density=44 },
        new PopulationDensityData { Code="NE", Value=12, Name="Niger", Population=15290000, Density=12 },
        new PopulationDensityData { Code="NG", Value=174, Name="Nigeria", Population=154729000, Density=167 },
        new PopulationDensityData { Code="NO", Value=16, Name="Norway", Population=5279970, Density=14 },
        new PopulationDensityData { Code="OM", Value=9, Name="Oman", Population=2845000, Density=9.2 },
        new PopulationDensityData { Code="PK", Value=225, Name="Pakistan", Population=193231420, Density=245 },
        new PopulationDensityData { Code="PA", Value=47, Name="Panama", Population=3454000, Density=46 },
        new PopulationDensityData { Code="PG", Value=15, Name="Papua New Guinea", Population=6732000, Density=15 },
        new PopulationDensityData { Code="PY", Value=16, Name="Paraguay", Population=6349000, Density=16 },
        new PopulationDensityData { Code="PE", Value=23, Name="Peru", Population=29461933, Density=23 },
        new PopulationDensityData { Code="PH", Value=313, Name="Philippines", Population=100981437, Density=337 },
        new PopulationDensityData { Code="PL", Value=126, Name="Poland", Population=38163895, Density=122 },
        new PopulationDensityData { Code="PT", Value=116, Name="Portugal", Population=10636888, Density=115 },
        new PopulationDensityData { Code="PR", Value=449, Name="Puerto Rico", Population=3982000, Density=449 },
        new PopulationDensityData { Code="WA", Value=152, Name="Qatar", Population=1409000, Density=128 },
        new PopulationDensityData { Code="RO", Value=93, Name="Romania", Population=21466174, Density=90 },
        new PopulationDensityData { Code="RU", Value=9, Name="Russia", Population=142905208, Density=8.3 },
        new PopulationDensityData { Code="RW", Value=431, Name="Rwanda", Population=9998000, Density=380 },
        new PopulationDensityData { Code="SA", Value=14, Name="Saudi Arabia", Population=28146658, Density=12 },
        new PopulationDensityData { Code="SN", Value=65, Name="Senegal", Population=12534000, Density=64 },
        new PopulationDensityData { Code="RS", Value=83, Name="Serbia", Population=7800000, Density=101 },
        new PopulationDensityData { Code="SL", Value=82, Name="Sierra Leone", Population=5696000, Density=79 },
        new PopulationDensityData { Code="SK", Value=113, Name="Slovakia", Population=5424057, Density=111 },
        new PopulationDensityData { Code="SI", Value=102, Name="Slovenia", Population=2192912, Density=108 },
        new PopulationDensityData { Code="SB", Value=19, Name="Solomon Is.", Population=523000, Density=18 },
        new PopulationDensityData { Code="SO", Value=15, Name="Somalia", Population=9133000, Density=14 },
        new PopulationDensityData { Code="ZA", Value=41, Name="South Africa", Population=50586757, Density=41 },
        new PopulationDensityData { Code="SS", Value=13, Name="S. Sudan", Population=8260490, Density=13 },
        new PopulationDensityData { Code="ES", Value=92, Name="Spain", Population=46087170, Density=91 },
        new PopulationDensityData { Code="LK", Value=333, Name="Sri Lanka", Population=20238000, Density=308 },
        new PopulationDensityData { Code="SD", Value=16, Name="Sudan", Population=31894000, Density=17 },
        new PopulationDensityData { Code="SR", Value=3, Name="Suriname", Population=520000, Density=3.2 },
        new PopulationDensityData { Code="SZ", Value=69, Name="Swaziland", Population=1185000, Density=68 },
        new PopulationDensityData { Code="SE", Value=23, Name="Sweden", Population=9366092, Density=21 },
        new PopulationDensityData { Code="CH", Value=196, Name="Switzerland", Population=7866500, Density=191 },
        new PopulationDensityData { Code="SY", Value=111, Name="Syria", Population=21906000, Density=118 },
        new PopulationDensityData { Code="TJ", Value=49, Name="Tajikistan", Population=6952000, Density=49 },
        new PopulationDensityData { Code="TZ", Value=51, Name="Tanzania", Population=43739000, Density=46 },
        new PopulationDensityData { Code="TH", Value=135, Name="Thailand", Population=64232760, Density=125 },
        new PopulationDensityData { Code="TP", Value=76, Name="Timor-Leste", Population=1134000, Density=76 },
        new PopulationDensityData { Code="TG", Value=111, Name="Togo", Population=6619000, Density=117 },
        new PopulationDensityData { Code="TT", Value=261, Name="Trinidad and Tobago", Population=1339000, Density=261 },
        new PopulationDensityData { Code="TN", Value=68, Name="Tunisia", Population=10327800, Density=63 },
        new PopulationDensityData { Code="TR", Value=95, Name="Turkey", Population=77804122, Density=93 },
        new PopulationDensityData { Code="TM", Value=11, Name="Turkmenistan", Population=5110000, Density=11 },
        new PopulationDensityData { Code="UG", Value=170, Name="Uganda", Population=32710000, Density=136 },
        new PopulationDensityData { Code="UA", Value=79, Name="Ukraine", Population=46936000, Density=78 },
        new PopulationDensityData { Code="AE", Value=90, Name="United Arab Emirates", Population=8264070, Density=99 },
        new PopulationDensityData { Code="GB", Value=257, Name="United Kingdom", Population=62041708, Density=255 },
        new PopulationDensityData { Code="US", Value=34, Name="United States", Population=325020000, Density=33 },
        new PopulationDensityData { Code="UY", Value=19, Name="Uruguay", Population=3463197, Density=20 },
        new PopulationDensityData { Code="UZ", Value=66, Name="Uzbekistan", Population=27488000, Density=61 },
        new PopulationDensityData { Code="VU", Value=20, Name="Vanuatu", Population=240000, Density=20 },
        new PopulationDensityData { Code="VE", Value=33, Name="Venezuela", Population=32240855, Density=35 },
        new PopulationDensityData { Code="VN", Value=280, Name="Vietnam", Population=85789573, Density=259 },
        new PopulationDensityData { Code="EH", Value=2, Name="W. Sahara", Population=513000, Density=1.9 },
        new PopulationDensityData { Code="YE", Value=46, Name="Yemen", Population=23580000, Density=45 },
        new PopulationDensityData { Code="ZM", Value=17, Name="Zambia", Population=12935000, Density=17 },
        new PopulationDensityData { Code="ZW", Value=32, Name="Zimbabwe", Population=13009530, Density=33 }
    };
    public class DropValues
    {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<DropValues> LegendType = new List<DropValues> {
        new DropValues { Value="Default", Name="Default" },
        new DropValues { Value="Interactive", Name="Interactive" }
    };
    public List<DropValues> LegendPosition = new List<DropValues> {
        new DropValues { Value="Top", Name="Top" },
        new DropValues { Value="Bottom", Name="Bottom" },
        new DropValues { Value="Left", Name="Left" },
        new DropValues { Value="Right", Name="Right" }
    };
    private void LegendTypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropValues> args)
    {
        LegendTypeDropDownValue = (args.Value).ToString();
        if (LegendTypeDropDownValue == "Default")
        {
            LegendTypeValue = LegendMode.Default;
        }
        else if (LegendTypeDropDownValue == "Interactive")
        {
            LegendTypeValue = LegendMode.Interactive;
        }
    }
    private void LegendPositionChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropValues> args)
    {
        LegendPositionDropDownValue = (args.Value).ToString();
        if (LegendPositionDropDownValue == "Top")
        {
            LegendPositionValue = Syncfusion.Blazor.Maps.LegendPosition.Top;
        }
        else if (LegendPositionDropDownValue == "Bottom")
        {
            LegendPositionValue = Syncfusion.Blazor.Maps.LegendPosition.Bottom;
        }
        else if (LegendPositionDropDownValue == "Left")
        {
            LegendPositionValue = Syncfusion.Blazor.Maps.LegendPosition.Left;
        }
        else if (LegendPositionDropDownValue == "Right")
        {
            LegendPositionValue = Syncfusion.Blazor.Maps.LegendPosition.Right;
        }
    }
    private void LegendToggleChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        ToggleCheck = args.Checked;
    }
}